import React from 'react'
import style from './index.module.css'
import { useNavigate } from 'react-router-dom'
const Index:React.FC = () => {
  const navigate=useNavigate()
  const science=()=>{
    navigate('/science')
  }
  const nk=()=>{
    navigate('/medicine')
  }
  const chang=()=>{
    navigate('/gastrointestinal')
  }
  return (
    <div className={style.box}>
      <b style={{fontSize:'20px',}}>专科服务</b> <span style={{color:'#ccc',fontSize:'16px'}}>已服务<span style={{color:'orange',fontSize:'16px'}}>15499407</span>人 <span style={{color:'orange',fontSize:'16px'}}>98.5%</span>满意</span>

       <div className={style.box1}>
           <div className={style.box2} onClick={science}>
               <img src="../src/assets/100_07.jpg" alt="" style={{width:'80px',height:'80px'}}/>
               <p style={{paddingRight:'10px'}}>中医调理</p>
           </div>
           <div className={style.box2} onClick={() => navigate('/mother')}>
               <img src="../src/assets/100_09.jpg" alt="" style={{width:'80px',height:'80px'}}/>
               <p >孕妇专科</p>
           </div>
            <div className={style.box2} onClick={() => navigate('/gynaecology')}>
               <img src="../src/assets/100_11.jpg" alt="" style={{width:'80px',height:'80px'}}/>
               <p>妇科健康</p>
           </div>
            <div className={style.box2} onClick={() => navigate('/education')}>
               <img src="../src/assets/100_13.jpg" alt="" style={{width:'80px',height:'80px'}}/>
               <p >宝宝健康</p>
           </div>
             <div className={style.box2} onClick={nk}>
               <img src="../src/assets/100_15.jpg" alt="" style={{width:'80px',height:'80px'}}/>
               <p style={{paddingRight:'20px',}}>内科</p>
           </div>
            <div className={style.box2} onClick={chang}>
               <img src="../src/assets/100_19.jpg" alt="" style={{width:'80px',height:'80px'}}/>
               <p>胃肠健康</p>
           </div>
            <div className={style.box2} onClick={() => navigate('/male')}>
               <img src="../src/assets/100_20.jpg" alt="" style={{width:'80px',height:'80px'}}/>
               <p >男性健康</p>
           </div>
            <div className={style.box2} onClick={() => navigate('/skin')}>
               <img src="../src/assets/100_23.jpg" alt="" style={{width:'80px',height:'80px'}}/>
               <p>皮肤健康</p>
           </div>
       </div>
    </div>
  )
}

export default Index
